<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的post请求传参</title>
    <!--1.引入外部的vue.js文件-->
    <script src="./js/vue@3.5.12.global.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
<!--2.视图-->
    <div id="app">
        <form action="#" onsubmit="return false">
            <p>账号：<input type="text" v-model="account"></p>
            <p>密码：<input type="password" v-model="password"></p>
            <!--只要文件域中的文件发生变化，就会触发onchange事件，就会执行getFile这个函数-->
            <!--多选文件域-->
            <!--<p>上传头像:<input ref="avatar" type="file" @change="getFile" multiple></p>-->
            <p>上传头像:<input ref="avatar" type="file" @change="getFile" ></p>
            <p><button @click="save">提交</button></p>
        </form>
    </div>
</body>
<script>
    //3.创建Vue实例
    const app = Vue.createApp({
        //model:放数据的地方
        data(){
            return {
                account: 'admin',
                password: '123456',
                file:{}//头像
            }
        },
        methods:{
            //提交数据的函数
            save(){
                //获取账户和密码
                console.log('账户：',this.account,'密码：',this.password)
                //可以对账户和密码进行校验，这里省略...........
                //将表单中的值使用FormData进行封装
                let formData = new FormData()
                formData.append('account',this.account)
                formData.append('password',this.password)
                //封装头像文件
                formData.append('avatar',this.file)
                //发送post请求
                axios.post('/api/user',formData) //这里进行了传值
                    .then(resp=>{
                        //执行成功
                        console.log(resp)

                    })
                    .catch(error=>{
                        //执行失败
                        console.log(error)
                    })
            },
            //获取文件的函数
            getFile(){
                //获取文件数组中的第一个
                let file =  this.$refs.avatar.files[0]
                console.log(file)
                this.file = file;
            }
        },
    })
    //4.挂载:将数据渲染到指定的视图位置
    app.mount('#app');
</script>
</html>